@import "scss/mixins";

// all histories
.history-panel {
    @extend .flex-vertical-container;
    > .controls {
        @extend .px-3;
        flex: 0 0 auto;
        .title {
            .name {
                margin-left: -1px;
            }
            input {
                font-weight: bold;
            }
        }
        .subtitle:not(:empty) {
            span + span:before {
                content: ", ";
            }
        }
        .history-size {
            float: left;
            @extend .mt-1;
        }
        .actions {
            &:empty {
                height: $icon-btn-size;
            }
        }
        .messages {
            clear: both;
            .quota-message {
                display: none;
            }
        }

        //TODO: move these out
        .annotation-display {
            display: none;
            margin-bottom: 8px;
            color: $text-muted;
            .prompt {
                display: block;
                margin: 0px;
                padding: 0px;
                font-size: 90%;
                font-weight: normal;
            }
            .prompt:after {
                content: ":";
            }
        }
        .annotation-display {
            .annotation {
                background: white;
                border-radius: 3px;
                border: 1px solid fade-out($border-color, 0.5);
                padding: 4px;
                white-space: pre-wrap;
                overflow: auto;
            }
            // fake placeholder for editable text annotation
            .annotation:empty:after {
                position: relative;
                top: -4px;
                font-size: 10px;
                font-style: italic;
                color: $text-muted;
                //TODO: move out for localization
                content: "Click here to edit annotation";
            }
            textarea {
                margin: 0px 0px 2px 0px;
                //display: block;
                border-radius: 3px;
                width: 100%;
            }
        }
        .list-pagination {
            width: 100%;
            text-align: center;
            margin: 0;
            border-top: 1px solid $btn-default-border;
            button {
                margin: 0;
                padding: 0;
                width: 25%;
                max-width: 128px;
                height: 20px;
                color: transparent;
                overflow: hidden;
            }
            .pages {
                // restyle closer to button
                -moz-appearance: none;
                -webkit-appearance: none;
                appearance: none;
                margin: 0;
                padding: 0;
                width: 48%;
                max-width: 256px;
                height: 20px;
                box-shadow: none;
                text-align: center;
                text-align-last: center;
                &:focus {
                    outline: none;
                }
                &:hover {
                    cursor: pointer;
                }
            }
            &:empty {
                display: none;
            }
            & > * {
                border: none;
                border-radius: 0px;
                background: transparent;
                &.pages {
                    color: $text-muted;
                    text-decoration: underline;
                }
                &:hover,
                &:focus,
                &:active {
                    background: $btn-default-bg;
                    color: $btn-default-color;
                    box-shadow: none;
                    text-decoration: none;
                }
            }
            &:hover > *:not([disabled]) {
                color: $btn-default-color;
            }
        }
    }

    // the help text that appears above the drop target
    .history-drop-target-help {
        margin: 10px 10px 4px 10px;
        color: $text-muted;
        font-size: 80%;
        font-style: italic;
        text-align: center;
    }
    .history-drop-target {
        min-height: 64px;
        margin: 0px 10px 10px 10px;
        border: 1px dashed black;
        border-radius: 3px;
    }

    > .list-items {
        @extend .flex-column;
        overflow-x: hidden;
        overflow-y: auto;
        &:empty {
            flex-grow: 0 !important;
        }
    }

    > .empty-message {
        @extend .m-3;
    }

    .loading-indicator,
    .contents-loading-indicator {
        display: inline-block;
        width: 100%;
        padding: 16px;
        text-align: center;
        color: $text-color;
    }

    .history-content.dataset,
    .history-content.dataset-collection {
        .title-bar {
            .title {
                .hid:after {
                    content: ":";
                }
            }
        }
    }
}

// ---------------------------------------------------------------------------- collapsed history controls
// compact the history controls when scrolling away from the top
.history-panel > .controls.collapsed {
    margin: 0px;
    padding: 4px 8px 4px;
    flex-basis: 32px;

    .messages,
    .title,
    .subtitle,
    .history-size,
    //TODO: move these out
    .annotation-display .prompt {
        display: none;
    }

    .search {
        margin-bottom: 4px;
    }
    .actions {
        margin-bottom: 0;
    }
    .list-pagination {
        .prev,
        .next {
            display: none;
        }
        .pages {
            float: left;
        }
    }
}

// ---------------------------------------------------------------------------- added class for wider display
// since these are rendered *within parts* of other pages, we need something more than a media query
.history-panel.wide {
    & > .controls {
        .actions:empty {
            height: auto;
        }
    }
}

// ---------------------------------------------------------------------------- collections nested in histories
.history-panel {
    .dataset-collection {
        .subtitle {
            margin-top: 2px;
        }
    }
}

// ---------------------------------------------------------------------------- annotated-history-panel
.annotated-history-panel {
    & > .controls {
        margin: 0px;

        .name {
            font-size: 150%;
            margin-bottom: 4px;
        }
        // annotations are displayed by default in this view
        .subtitle {
            display: block;
            white-space: pre-wrap;
            &:empty {
                display: none;
            }
        }
        .history-size {
            float: none;
            margin: 0;
        }
    }

    // defined outside of list-items because .headers is actually added to controls
    // so that it will stay in place despite scrolling
    .headers.contents-container {
        margin-bottom: 0;
        border-bottom: 2px solid grey;
        cursor: unset;
        & > * {
            vertical-align: middle;
            padding: 8px;
            font-weight: bold;
        }
        .additional-info {
            text-align: right;
        }
    }
    .contents-container {
        display: table;
        table-layout: fixed;
        width: 100%;

        // show clickable for expansion
        cursor: pointer;
        border-bottom: 1px solid rgba(grey, 0.5);
        & > * {
            display: table-cell;
            vertical-align: top;
            width: 50%;
        }
        .additional-info:not(.header) {
            /* top and bottom should be == title-bar padding */
            padding: 8px;
            // do not html format
            white-space: pre-wrap;
        }
    }

    & > .list-items {
        width: 100%;
        border-bottom: 1px solid lightgrey;
    }

    .empty-message {
        margin-top: 8px;
    }
}

// ---------------------------------------------------------------------------- embedded in pages
.embedded-item.display.history .annotated-history-panel {
    & > .controls {
        .name {
            display: none;
        }
    }
}

// ---------------------------------------------------------------------------- current-history-panel
.current-history-panel {
    & > .controls .list-pagination {
        // text a bit smaller for all
        font-size: 90%;
        & > * {
            font-size: inherit;
        }
    }

    // .current-content is added to dataset/collection when displayed/edited/visualized, etc@mixin
    //  (roughly: when it's being used in the center panel)
    .list-item.history-content.current-content {
        //TODO: Galaxy's 'bs-primary' color - not sure where this is defined
        border-left: 5px solid #4e5777;
    }
}

// ---------------------------------------------------------------------------- analyze data page - right panel
#right.history-right-panel {
    .unified-panel-body {
        display: -webkit-flex;
        .middle {
            overflow: auto;
            width: 100%;
            display: -webkit-flex !important;
        }
    }
}

// ---------------------------------------------------------------------------- multi-view / multi-panel
.multi-panel-history {
    $mph-column_width: 312px;
    $mph-border_width: 1px;
    $mph-column_gap: 8px;
    $mph-header_height: 40px;
    $mph-footer_height: 0;
    $mph-controls_height: 28px;

    // for some reason, .flex-row-container below won't be applied to multi-panel-history since it's the enclosing node
    // re-apply here
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

    .flex-row-container,
    .flex-column-container {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;

        -webkit-align-items: stretch;
        -ms-align-items: stretch;
        align-items: stretch;

        -webkit-align-content: stretch;
        -ms-align-content: stretch;
        align-content: stretch;

        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .flex-row-container {
        -webkit-flex-direction: column !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important;
    }
    .flex-column-container {
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .flex-row,
    .flex-column {
        -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;

        -webkit-align-self: auto;
        -ms-flex-item-align: auto;
        align-self: auto;
    }

    /* ---------------------- header & footer */
    & > .header,
    & > .footer {
        width: 100%;
        background-color: $white;
    }
    & > .header {
        min-height: $mph-header_height;
        max-height: $mph-header_height;
        .search-control {
            width: 300px;
            float: left;
            height: 36px;
        }
        // popover containing sorting and filters
        .more-options {
            .btn {
                width: 100%;
                height: 26px;
            }
            input[type="checkbox"] {
                margin-top: 1px;
            }
        }
        .popover {
            min-width: 290px;
        }
    }
    & > .footer {
        min-height: $mph-footer_height;
        max-height: $mph-footer_height;
    }

    // make the buttons in the header/footers and the panel controls slightly smaller
    .smaller-btn {
        height: 20px;
        line-height: normal;
        font-size: 90%;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    // the header/footers controls
    .control-column {
        margin-top: 4px;
        .btn {
            @extend .btn-sm;
        }
        .open-more-options {
            margin-top: 4px;
            padding: 2px 6px 2px 6px;
            font-size: 100%;
        }
        .header-info {
            display: inline-block;
            padding: 2px 4px 2px 4px;
            color: $text-muted;
        }
        &.control-column-right,
        &.control-column-left {
            margin-right: 8px;
            margin-left: 8px;
            & > * {
                margin-left: 8px;
            }
        }
        &.control-column-center {
            text-align: center;
            max-height: 22px;
            -webkit-flex: 0 1 auto;
            -ms-flex: 0 1 auto;
            flex: 0 1 auto;

            /* truncate */
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        &.control-column-right {
            text-align: right;
        }
    }

    /* ---------------------- middle */
    .outer-middle {
        overflow: auto;
    }
    .middle {
        min-width: 100%;
        margin: 0px 0px 0px 0px;
        background-color: $white;
        padding: $mph-column_gap 0px;
    }

    .history-column {
        width: $mph-column_width;
        margin: 0px $mph-column_gap 0px 0px;

        // current history
        &:first-child {
            position: fixed;
            z-index: 10;
            background-color: $white;
            width: $mph-column_width + $mph-column_gap;
            padding-left: $mph-column_gap;

            // visually differentiate the current history
            .history-panel {
                border: 1px solid black;
                box-shadow: 4px 4px 4px rgba(96, 96, 96, 0.3);
            }
        }
        &:nth-child(2) {
            // push the column after the current away from the left (since it's fixed)
            margin-left: ($mph-column_width + $mph-column_gap * 2);
        }
        &:last-child {
            margin-right: 0px;
        }
        .panel-controls {
            width: 100%;
            height: $mph-controls_height;
            background-color: $white;

            .btn {
                @extend .btn-sm;
            }
            .panel-menu {
                z-index: 1;
                .dropdown-menu a {
                    text-align: left;
                }
            }
            .current-label {
                display: inline-block;
                color: $text-muted;
                padding-left: 2px;
                margin-top: 2px;
            }
        }
        .history-panel {
            width: 100%;
            border: $mph-border_width solid grey;
            border-radius: 3px 3px 0px 0px;
            background-color: $panel-bg-color;
            overflow: auto;
            & > .controls .subtitle {
                min-height: 15px;
                margin: -4px 0px 8px;
                span + span:before {
                    content: ", ";
                }
            }
            & > .controls .list-pagination {
                // text a bit smaller for all
                font-size: 90%;
                & > * {
                    font-size: inherit;
                }
            }
        }
    }

    // loading indicator on far right of multipanel view
    .histories-loading-indicator {
        // if we don't bring the width down here, the space is way too large for vertical text
        width: 8px;
        transform: rotate(90deg);
        transform-origin: left top 0;
        margin-left: 16px;
        white-space: nowrap;
        color: $text-muted;
        span {
            // space btwn icon and text
            margin-right: 8px;
        }
    }
}

// History panel tags editor
.history-panel .tags-display {
    padding: 1px;
    @include shutterFade(250px);
}
